<template>
  <div style="margin: 10px;">
    <el-form style="margin-left: 10px;" ref="form" :model="controlForm" label-position="top">
      <el-form-item label="选择模型">
        <el-select ref="modelCode" v-model="controlForm.modelCode" @change="changeModel" placeholder="请选择"
                   style="width: 100%;">
          <el-option v-for="item in modelList" :key="item.modelCode" :label="item.modelName" :value="item.modelCode">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择控制参数">
        <el-select ref="parameterCode" v-model="controlForm.parameterCode" @change="changeParameter"
                   :disabled="!controlForm.modelCode"
                   placeholder="请选择" style="width: 100%;">
          <el-option v-for="item in parameterList" :key="item.parameterCode" :label="item.parameterName"
                     :value="item.parameterCode">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择控制指令">
        <el-select ref="command" v-model="controlForm.command" :disabled="!controlForm.parameterCode" placeholder="请选择"
                   style="width: 100%;">
          <el-option v-for="item in commandList" :key="item.command" :label="item.commandName" :value="item.command">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div style="width: 100%; text-align: center;" v-if="$route.query.type != 2">
      <el-button @click="saveOn" type="primary">保存</el-button>
    </div>
  </div>
</template>

<script>
import { queryDeviceModelList, queryParamAndComByModelCode } from "@/api/workflow/index"
export default {
  data () {
    return {
      controlForm: {
        modelCode: '',
        parameterCode: '',
        command: '',
      },
      modelList: [],
      parameterList: [],
      commandList: [],
    }
  },
  props: {
    capList: {
      type: String,
      default: ""
    },
  },
  async mounted() {
    await this.getDeviceModelList()
    if (this.capList) {
      this.controlForm.modelCode = JSON.parse(this.capList).deviceModelCode
      await this.queryParamAndComByModelCode()

      this.controlForm.parameterCode = JSON.parse(this.capList).parameterCode
      this.commandList = this.parameterList.filter(v => v.parameterCode == this.controlForm.parameterCode)[0].list
      this.controlForm.command = JSON.parse(this.capList).command
    }
  },
  methods: {
    async getDeviceModelList() {
      const res = await queryDeviceModelList()
      if (res.status == 200) {
        this.modelList = res.object
      }
    },
    changeModel(val) {
      this.queryParamAndComByModelCode()
      this.controlForm.parameterCode = ""
      this.controlForm.command = ""
    },

    async queryParamAndComByModelCode() {
      const res = await queryParamAndComByModelCode({
        modelCode: this.controlForm.modelCode
      })
      if (res.status == 200) {
        this.parameterList = res.object
      } else {
        this.$message({
          type: "error",
          message: res.message,
        })
      }
    },

    changeParameter(val) {
      this.controlForm.command = ""
      this.commandList = this.parameterList.filter(v => v.parameterCode == val)[0].list
    },

    saveOn () {
      this.$emit('addMessage', {
        deviceModelCode: this.controlForm.modelCode,
        deviceModelName: this.$refs.modelCode.selected.label,
        parameterCode: this.controlForm.parameterCode,
        parameterName: this.$refs.parameterCode.selected.label,
        command: this.controlForm.command,
        commandName: this.$refs.command.selected.label,
      })
    }
  }
}
</script>


<style></style>
